<template>
  <div class="top-bar">
    <div class="wrap top-bar-wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">                     
        <ul>
          <li @click="toShowToast">
            <img class="avatar" width="26" :src="userInfo.headImg" alt="">
            用户名：{{userInfo.nickName }}
          </li>
          <li>我的鸡腿：{{userInfo.coin}} </li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="login-btn" @click="toLogin" v-show="!isLogin">登录</li>
          <li class="cart-btn" v-show="isLogin" >
             <img src="../assets/img/cart.png"/>
             <span>购物车</span>
             <b>{{carTotal}}</b>
          </li>
        </ul>

      </div>
    </div>
    
  </div>
</template>

<script>

import showToast from "@/store/showToast";
import {mapMutations,mapState,mapActions} from "vuex"
import { WeixinLoginApi} from "@/request/api";
import userinfo from "@/store/userInfo";


export default {
  data () {
    return {
       
    }
  },
   
  watch:{
     "$route.path":{
         handler(newVal,oldVal){
              let myToken =  localStorage.getItem("x-auth-token")
              this.changeIsLogin(Boolean(myToken))
         }

     }
  },

  //路由切换的时候让topbar进行重载
    created(){


    this.$nextTick().then(async ()=>{
          let mycode = this.$route.query.code;
          console.log("mycode是:",mycode);
          if(mycode){
            //扫码登陆
             let res = await WeixinLoginApi({
                code : mycode
             })
             if(res.code == 0){
                //扫码登陆成功
                
                this.asyncchangeIsShowToastModal({msg:"登陆成功",type:"success"})
                
                localStorage.setItem("x-auth-token",res["X-auth-token"])
                
                this.changeIsLogin(true);

                this.$router.push(this.$route.path);

                this.ayncChangeUserInfo();  

                return;

              }else if(res.code == 400){
                //code过期
                 this.asyncchangeIsShowToastModal({
                      msg: "二维码已经失效,请重新扫码登录!",
                      type : "danger"
                 });
                 this.changeIsShowLoginModal(true);
                 
             }else if(res.code == 407){
                    //用户还没有绑定手机
                    this.asyncchangeIsShowToastModal({
                        msg: "初次扫码,请用手机号首次登陆!",
                        type : "warning"
                    });
                this.changeIsShowLoginModal(true);
                //保存uuid
                localStorage.setItem("uuid",res.uuid);
             }            
          }else{

              //用户正常登陆的操作
              let myToken =  localStorage.getItem("x-auth-token")
              console.log("mytoken.........",myToken)
              this.changeIsLogin(Boolean(myToken))

              if(myToken){
                  //有登录的情况
                  this.ayncChangeUserInfo();

              }else{
                //没有登陆的情况
                 this.initUserInfo();
              }
          }    
    })

  },

   computed:{
        ...mapState({
          isLogin : state => state.loginStatus.isLogin,
          carTotal: state => state.userInfo.carTotal,
          userInfo: state => state.userInfo.userInfo
        })
   },

  methods:{

    ...mapMutations({
        changeIsShowLoginModal : "showLoginModal/changeIsShowLoginModal",
        changeIsShowToastModal : "showToast/changeIsShowToastModal",
        changeIsLogin:"loginStatus/changeIsLogin",
        initUserInfo:"loginStatus/initUserInfo"
    }),

    ...mapActions({
           asyncchangeIsShowToastModal:"showToast/asyncchangeIsShowToastModal",
           ayncChangeUserInfo:"userInfo/ayncChangeUserInfo"
    }),
    
    toLogin(){
       this.changeIsShowLoginModal(true)
    },

    toShowToast(){
       this.asyncchangeIsShowToastModal({
           msg: "登陆成功!",
           type : "success"
       });
    }
  }
}
</script>
 
<style lang = "less" scoped>


@import url("../assets/css/global.less");

  .top-bar{
    height: 40px;
    background: #242B39;
    color: #FFFEFE;
    line-height: 40px;
    .top-bar-wrap{
      /* background-color: pink; */
      height: 40px;
      display: flex;
      justify-content: space-between;
      /*字体样式 */
      font-size: 14px;
      font-family: SourceHanSansSC;
      font-weight: 300;
      color: #FFFEFE;
      .r{
        ul{
          display: flex;
          li{
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-left: 20px;
            .avatar{
              border-radius: 50%;
              margin-right: 6px;
            }
            &.login-btn{
              width: 124px;
              height: 40px;
              background: @base-color;
              justify-content: center;
            }
          }
        }
      }
    }

  }



  .cart-btn{
    width: 124px;
    height: 40px;
    background: @base-color;
    justify-content: center;
    img{
      margin-right: 10px;
    }

    b{
      width: 22px;
      height: 22px;
      line-height: 22px;
      margin-left: 8px;
      background-color: #f40;
      text-align: center;
      border-radius: 50%;
    }


  }
  
</style>